
// navbar
Vue.component('vanNavBar', {
  template: `
  <div class='van-nav-bar'>
    <span @click="$emit('backbuttonfn')">&lt返回</span>
    <span>{{title}}</span>
    <span @click="$emit('searchbuttonfn')">搜索</span>
  </div>
  `,
  props: {
    title: {
      type: String,
      required: 'true'
    }
  },
  data() {
    return {
    }
  },
})

// Button
// TODO我点击创建按钮时项目中会真实的创建，但是这个逻辑是怎么实现的呢
Vue.component('vanButton', {
  template: `
    <button class='create-button' @click="createBtn" >{{type}}</button>
  `,
  props: {
    type: {
      type: String,
      required: true,
    }
  },

  methods: {
    createBtn() {
      this.$emit('createbtn')
    }
  }
})
// loading
Vue.component('vanLoading', {
  template: `
  <div class='van-loading' v-show='show'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  `,
  props: ['show']
})
// table
Vue.component('vanTable', {
  template: `
  <table border='1'cellpadding='20' cellspacing='0'>
    <tr>
      <th v-for='item in columns'>{{item.title}}</th>     
    </tr>
    <tr v-for='item in data1'>
      <td v-for='col in columns'>{{item[col.key]}}</td>
    </tr>
    
  </table>
  `,
  props: ['columns', 'data1']
})